<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="html5plus://ready"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.tala {
				text-align: center;
				line-height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="app-js">
			<header>
				<van-nav-bar @click-left="onClickLeft" style="background-color:red;">
					<van-icon slot="left" name="arrow-left" color="white"></van-icon>
					<label slot="title" style="color: white;">结算</label>
				</van-nav-bar>
			</header>
			<section>
				<van-badge-group class="margin-top">
					<van-badge title="商品清单"></van-badge>
				</van-badge-group>

				<van-row>
					<van-col span="24">
						<van-card 
							:num="1" 
							:price="goods.RealPrice" 
							:title="goods.Name" 
							:thumb="goods.CoverImage" />
					</van-col>
				</van-row>

				<van-badge-group style="margin-top: 10px;">
					<van-badge title="收货地址"></van-badge>
				</van-badge-group>

				<van-cell-group>
					<van-field v-model="nickName" clearable label="联系人" placeholder="请输入联系人"></van-field>
					<van-field v-model="phone" clearable label="手机号码" placeholder="请输入手机号"></van-field>
					<van-field v-model="address" clearable label="详细地址" placeholder="请输入详细地址"></van-field>
				</van-cell-group>

				<van-badge-group style="margin-top: 10px;">
					<van-badge title="支付方式"></van-badge>
				</van-badge-group>

				<van-radio-group v-model="radio">
					<van-cell class="tala">

						<van-col span="5"><img src="../img/timg3.png" style="width: 50%; height: 50%;"></van-col>
						<van-col span="19">
							<van-radio-group v-model="radio" checked-color="#07c160">
								<van-cell-group>
									<van-cell title="支付宝支付" clickable @click="radio = '1'">
										<van-radio name="1" />
									</van-cell>
								</van-cell-group>
							</van-radio-group>
						</van-col>
						<van-col span="5"><img src="../img/timg2.png" style="width: 50%; height: 50%;"></van-col>
						<van-col span="19">
							<van-radio-group v-model="radio" checked-color="#07c160">
								<van-cell-group>
									<van-cell title="微信支付" clickable @click="radio = '2'">
										<van-radio name="2" />
									</van-cell>
								</van-cell-group>
							</van-radio-group>
						</van-col>
					</van-cell>
				</van-radio-group>
			</section>
			<footer>
				<van-submit-bar :price="num" button-text="提交订单" @submit="onSubmit"></van-submit-bar>

			</footer>
		</div>
	</body>
	<script>
		var newUser = localStorage.getItem("user"); //从localStorage里取数据(字符串格式)
		newUser = JSON.parse(newUser); //转换成Json格式
		 //用户信息
		var vm = new Vue({
			el: "#app-js",
			data: {
				goods: [], //商品数组
				nickName: '', 
				phone: '', 
				address: '', 
				radio: '1', 
				num: 1 
			},
			created: function() {
				var _this = this;
				//var w = plus.webview.currentWebview().pid;
				
				ajax({ 
					//购物车产品数据接口
					url: "http://dsapi.ysd3g.com/API/GoodsDetail",
					dataType: "jsonp",
					data: {
						//获取窗口ID
						gId:plus.webview.currentWebview().pid
					},
					success: function(res) {
						_this.goods = res;
					}
				})
				_this.nickName = newUser.UserData.NickName;
				_this.phone = newUser.UserData.Phone;
				_this.address = newUser.UserData.CityName + newUser.UserData.DistrictName + newUser.UserData.ProvinceName;
				//输入单个商品价格
			},
			methods: {
				onClickLeft: function() {
					plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
				},
				onSubmit: function() { 
					
					var shoppingCartJsonStr = [];
						shoppingCartJsonStr = [{
							goodsId: 11,
							buyCount: 1
						}]
					
					var toast = vm.$toast.loading({
						duration: 0, // 持续展示 toast
						forbidClick: true, // 禁用背景点击
						message: '正在生成订单'
					});
					ajax({
						url: "http://dsapi.ysd3g.com/API/GeneratingOrder",
						dataType: "jsonp",
						data: {
							Key: localStorage.getItem("key"),
							shoppingCartJsonStr: JSON.stringify(shoppingCartJsonStr)
						},
						success(res) {
							if (res.Error) {
								vm.$toast.fail(res.Msg);
							} else {
								vm.payId = res.OrderId;
								ajax({ //支付
									url: "http://dsapi.ysd3g.com/api/OrderPay",
									dataType: "jsonp",
									data: {
										Key: localStorage.getItem("key"),
										oId: vm.payId,
										payType: '1', //写死的支付宝
										addressIdx: vm.list, //默认收货地址
										moey: vm.totalPrice //总价
									},
									success: function(res) {
										// vm.$toast.alert("付款");
										if (res.Error) {
											alert(res.Msg)
										} else {
											var payment = "";
											plus.payment.getChannels(function(s) {
												var channel=s;
												for(var i=0;i<channel.length;i++){
													if(channel[i].id==vm.redio){
														var payment = channel[i];
													}
												}
												plus.payment.request(s[0], res.strJson, function() {
													vm.$toast.alert("支付操作成功！");
													localStorage.removeItem(orderId);
												}, function(e) {
													_this.$toast.fail(e.message);
												})
											}, function() {
												vm.$toast.alert("出现错误，请稍后再试！")
											})
										}
									}
								});
								vm.$toast.clear();
							}
						}
					});
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					//支付操作
					var _this = this;
					console.log(newUser.Key);
					ajax({ 
						//支付接口
						url: "http://dsapi.ysd3g.com/api/OrderPay",
						dataType: "jsonp",
						data: {
							key: newUser.Key, //登陆返回的Key键值
							oId: localStorage.getItem('orderId'), //订单Id
							payType: '1', //支付宝支付
							addressIdx: "", //可为空,收货地址
							money: "0.01" //总价格
						},
						success: function(res) {
							if (res.Error) {
								alert(res.Msg)
							} else {
								var payment = "";
								//获取支付通道
								plus.payment.getChannels(function(s) {
									//请求支付操作
									plus.payment.request(s[0], res.strJson, function() {
										vm.$toast.alert("支付成功！");
										localStorage.removeItem(orderId);
									}, function(e) {
										_this.$toast.fail(`获取支付通道列表失败：${e.message}`);
									})
								}, function(e) {
									vm.$toast.fail(`支付失败：${e.code}`)
								})
							}
						}
					});
				}
			}
		})
	</script>
</html>
